<template>
	<div class="card">
		<el-main>
			<el-row :gutter="15">
				<el-col :lg="8">
					<el-card shadow="never" header="常用">
						<QrCode text="scui"></QrCode>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never" header="带Logo">
						<QrCode text="scui" :logo="logo"></QrCode>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never" header="自定义颜色大小">
						<QrCode text="scui" :size="100" colorDark="#088200" colorLight="#fff"></QrCode>
					</el-card>
				</el-col>
				<el-col :lg="8">
					<el-card shadow="never" header="动态">
						<QrCode :text="qrcode"></QrCode>
						<el-input v-model="qrcode" placeholder="Please input" style="margin-top: 20px" />
					</el-card>
				</el-col>
			</el-row>
		</el-main>
	</div>
</template>

<script setup lang="ts" name="qrcode">
import { ref } from 'vue'
import QrCode from '@/components/QrCode/index.vue'
// 导入本地图片
import { getAssetsImages } from '@/utils/util'

const qrcode = ref('sloth')
const logo = ref()
logo.value = getAssetsImages('msg01.png')
</script>
<style lang="scss" scoped>
.el-card {
	margin-bottom: 15px;
}
</style>
